<script setup lang="ts">
import {onBeforeMount, onMounted, ref} from 'vue'
import {SearchOutlined} from '@ant-design/icons-vue'
import {getHotSearchList, getSearchModel} from "@/api/system/search";
import {ECode, PagePath} from "@/util/commonUtil";
import {router} from "@/router";

const open = ref<boolean>(false);
const searchKey = ref('')
const hotList = ref<any>([])
const showModal = () => {
  open.value = true;
};
const searchModel = ref<number>(0)
const onSearch = () => {
  console.log('搜索关键字', searchKey.value)
}
onBeforeMount(() => {
  getModel()
})
onMounted(() => {
  getHotList()
})
const getHotList = () => {
  getHotSearchList().then((response: any) => {
    if (response.code === ECode.SUCCESS) {
      hotList.value = response.data
    }
  })
}

function searchClick(item: any) {
  let routeData = router.resolve({
    path: PagePath.ResultsPath,
    query: {keyword: item, model: searchModel.value},
  })
  window.open(routeData.href, '_blank')
}

function getModel() {
  getSearchModel().then((response: any) => {
    if (response.code === ECode.SUCCESS) {
      searchModel.value = response.data;
    }
  })
}
</script>

<template>
  <div class="flex relative cursor-pointer">
    <div class="search-icon h-8 w-8 flex items-center justify-center" @click="showModal">
      <SearchOutlined/>
    </div>
    <a-modal v-model:open="open" title="搜索">
      <div class="flex">
        <a-input-search
            v-model:value="searchKey"
            placeholder="输入关键词快速查找"
            enter-button
            @search="onSearch"
        />
      </div>
      <div class="flex flex-col gap-1 mt-2.5">
        <template v-for="(item,index) in hotList" v-if="hotList.length > 0">
          <div
              @click="searchClick(item.content)"
              class="inline-flex items-center hover:bg-slate-100 hover:rounded-lg hover:text-orange-600 cursor-pointer">
            <div class="w-6 h-6 mr-1">
              <span class="w-full flex justify-center items-center hot-item" :class="index < 3 ?'hot-item-hot':''">
                {{ index + 1 }}
              </span>
            </div>
            <div class="content w-full flex justify-between">
              <span>{{ item.content }}</span>
              <span v-if="index === 0">
                <a-tag color="orange">热</a-tag>
              </span>
            </div>
          </div>
        </template>
        <a-tag v-else color="orange">一触即达</a-tag>
      </div>
      <template #footer>
        <span class="search-footer">Power By QX</span>
      </template>
    </a-modal>
  </div>
</template>

<style lang="less" scoped>
:deep(.ant-input-search-button) {
  display: flex;
  align-items: center;
}

.search-icon {
  border-radius: 50%;
  color: #FFF;
  background: #409EFF;
}

.hot-item {
  color: #999;
  font-weight: 600;
  font-size: 16px;
}

.hot-item-hot {
  color: #ff9607;
}

.search-footer:before {
  content: "——";
  margin: 0 .2em 0 0;
}
</style>
